<template>
  <div class="list">
    我是list   <router-link to='/' >返回到home</router-link>
    <div v-for="item in list" :key=item   class="item">
         <router-link :to='item' >{{`去到${item}`}}</router-link>
    </div>

  </div>
</template>

<script>

export default {
  name: 'list',
  data () {
    return {

    }
  },
  mounted () {
    console.log(this.$router.START_LOCATION)
    // this.getRoute()
  },
  computed: {
    list: function () {
      return new Array(100).fill('').map((item, index) => `/about/${index}`)
    }
  },
  beforeRouteEnter (to, from, next) {
    console.log('组件进入钩子list1')
    next()
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteLeave (to, from, next) {
    console.log('组件离开钩子list2')
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    next()
  }

}
</script>

<style lang="less" scoped>
.list {
    width: 100%;
    overflow: hidden;
    background-color: gray;

    .item {
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;

        font-size: 18px;
        font-weight: bold;
    }
}
</style>
